<template>
  <div class="max-w-3xl mx-auto">
    <div class="sm:flex sm:items-center">
      <div class="sm:flex-auto">
        <h1 class="text-2xl font-semibold text-gray-900">新建酿造批次</h1>
        <p class="mt-2 text-sm text-gray-700">创建一个新的酿造批次</p>
      </div>
    </div>

    <div class="mt-8 bg-white shadow sm:rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <form @submit.prevent="createBatch" class="space-y-6">
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700">批次名称</label>
            <div class="mt-1">
              <input
                type="text"
                id="name"
                v-model="form.name"
                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
                placeholder="例如：BATCH-2024-001"
              />
            </div>
          </div>

          <div>
            <label for="recipe" class="block text-sm font-medium text-gray-700">配方</label>
            <div class="mt-1">
              <select
                id="recipe"
                v-model="form.recipeId"
                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
              >
                <option value="">请选择配方</option>
                <option v-for="recipe in recipes" :key="recipe.id" :value="recipe.id">
                  {{ recipe.name }}
                </option>
              </select>
            </div>
          </div>

          <div>
            <label for="startDate" class="block text-sm font-medium text-gray-700">开始日期</label>
            <div class="mt-1">
              <input
                type="date"
                id="startDate"
                v-model="form.startDate"
                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
              />
            </div>
          </div>

          <div>
            <label for="estimatedEndDate" class="block text-sm font-medium text-gray-700">预计完成日期</label>
            <div class="mt-1">
              <input
                type="date"
                id="estimatedEndDate"
                v-model="form.estimatedEndDate"
                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
              />
            </div>
          </div>

          <div>
            <label for="notes" class="block text-sm font-medium text-gray-700">备注</label>
            <div class="mt-1">
              <textarea
                id="notes"
                v-model="form.notes"
                rows="3"
                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-brew-amber focus:ring-brew-amber sm:text-sm"
                placeholder="添加任何额外的说明或注意事项..."
              />
            </div>
          </div>

          <div class="flex justify-end space-x-3">
            <router-link
              :to="{ name: 'brewing' }"
              class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brew-amber"
            >
              取消
            </router-link>
            <button
              type="submit"
              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brew-amber hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brew-amber"
            >
              创建批次
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps({
  recipeId: {
    type: String,
    default: ''
  }
})

// 模拟配方数据
const recipes = ref([
  { id: 1, name: 'Hoppy IPA' },
  { id: 2, name: '比利时小麦啤酒' },
  { id: 3, name: '德式皮尔森' }
])

const form = ref({
  name: '',
  recipeId: props.recipeId || '',
  startDate: new Date().toISOString().split('T')[0],
  estimatedEndDate: '',
  notes: ''
})

onMounted(() => {
  // 如果从配方页面跳转过来，自动选择对应的配方
  if (props.recipeId) {
    form.value.recipeId = props.recipeId
  }
})

const createBatch = () => {
  // TODO: 实现创建批次的逻辑
  console.log('创建批次:', form.value)
  router.push({ name: 'brewing' })
}
</script> 